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5 FAH-8 H-521 USABILITY 

(CT: WEBS; 04-1 6-2013) 

Usability is the measure of the quality of a user's experience when viewing a Web 
site. It is a subjective measurement of a user's satisfaction and varies from one 
user to the next. A usable site is accessible, appealing, informative, easy to 
navigate, and error tolerant. In addition to the following mandatory and 
recommended practices, http://usability.gov/ describes other usability concepts. 



5 FAH-8 H-522 PLANNING AND DESIGNING 
5 FAH-8 H-522. 1 Reduce Download Time 

(CT: WEBS; 04-1 6-2013) 

a. Main pages should download in 10 seconds or less. Links to subordinate pages 
that are known to take over 10 seconds to download will be annotated to 
indicate the expected time. 

b. Download times are impacted by factors including: 

(1) (Too many graphics; 

(2) Improperly optimized graphics; 

(3) Inappropriate use of applets; 

(4) Slow server performance; and 

(5) Network data congestion. 

While there is little the Web designer can do about slow server performance and 
network congestion, graphics and applet use are within his or her control. The 
goal is to minimize the number of bytes per page. 

c. Users become impatient when faced with slow page downloads. Display main 
or top-level pages quickly and provide links to more detailed information. If a 
user elects to view a larger, more complex page, he or she is more willing to 
wait for the page to download. Use of a Web Proxy tool (e.g., Fiddler) in 
combination with ENM network bandwidth and latency metrics can provide 
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insight into performance expectations of complex Web pages. 

d. Allow the user to alternatively select a lightweight Web page experience for the 
site. The lightweight alternative will include similar functionality, but without 
the added weight of images and large script files so as to minimize wire 
footprint and download time. Set and read a browser cookie to maintain the 
state of user preferences and allow the user to re-select the standard, rich- 
featured Web page experience. 

e. Optimize the use of A3 AX (Asynchronous JavaScript and XML) and "Partial 
Page" rendering techniques to improve user experience and response times. 
Consider using lightweight JavaScript AJAX libraries and removing modules that 
are not required. 

f. Explore placement of "deferrable" JavaScript at the bottom of the page and 
style sheets in the HTML Document head as this may improve the user 
experience during page rendering. (Generally, though, it is best that JavaScript 
and CSS files be stored external to the document.) Also explore preloading 
script files. 

g. Internet Explorer defaults to optimize browser caching; also explore the use of 
Expires and Cache Control Headers for dynamic and static content and consider 
using ETags for fine-grained control of caching. 

h. Use server side compression. Most browsers are capable of using Deflate and 
GZIP but, if possible, configure Deflate as the default as it offers superior 
compression ratios relative to GZIP. 

i. Bundle JavaScript and CSS files (i.e., use one JavaScript file and one CSS file to 
minimize HTTP requests) and use a minification tool to decrease the weight of 
the files. 

j. If the site provides functionality to upload files, configure the server and/or 
application to use Message Transmission Optimization Mechanism (MTOM), 
which will improve efficiency and reduce the wire footprint of uploaded files. 

5 FAH-8 H-522.2 Design for Department of State's 
Common Display Size 

(CT: WEBS; 04-1 6-2013) 

a. Design Web pages to work at any resolution, from 800x600 to 1280x1024 and 
beyond. 

b. Consider (as of this writing) designing for a resolution of 1024x768 and ensure 
it transforms gracefully to the 800 x 600 setting. 

c. Web pages should be designed to avoid the necessity to scroll horizontally to 
view the entire page. 

d. Assess the tradeoffs of using a Liquid or Fixed Layout for the target device. 
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e. Optimize for mobile Web environments with a targeted service designed 

specifically for that mobile device. 

5 FAH-8 H-522.3 Use Readable Font Size 

(CT: WEBS; 04-1 6-2013) 

a. In style sheets, the font-size attribute must be specified in points (pt), not 
pixels (px). Point sizes are fixed regardless of monitor resolution where pixels 
are a function of monitor resolution. 

b. Font size affects the ability to read and understand text. 10-point or larger font 
is recommended for most users while a minimum of 12-point or 14-point is 
recommended for people over 65. Font size 3 is roughly equivalent to a 12- 
point character and font size 2 is the minimum that should be used on the 
Department Web sites. 

c. If it is necessary to use font size 1, use a style sheet to increase the line 
spacing. 

d. Font size examples: 
8-point 

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain 
unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. 

10-point 

We hold these truths to be self-evident, that all men are created equal, that they are endowed by 
their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of 
Happiness. 
12-point 

We hold these truths to be self-evident, that all men are created equal, that they 
are endowed by their Creator with certain unalienable Rights, that among these 
are Life, Liberty and the pursuit of Happiness. 
14-point 

We hold these truths to be self-evident, that all men are created 
equal, that they are endowed by their Creator with certain unalienable 
Rights, that among these are Life, Liberty and the pursuit of 
Happiness. 

e. Text and background colors affect the user's perception of font size. Dark text 
on a light background is easy to read. Light text on a dark background, 
regardless of the level of contrast, is more difficult to read. When using a dark 
background, the font size should be increased. 

f. Text/background examples comparing 12-point and 14-point type: 
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Four score and seven years ago our fathers brought forth on this continent a 
new nation, conceived in liberty and dedicated to the proposition that all men 
are created equal. 



Four score and seven years ago our fathers brought forth on this continent a 
new nation, conceived in liberty and dedicated to the proposition that all men 
are created equal. 



Four score and seven years ago our fathers brought forth on this 
continent a new nation, conceived in liberty and dedicated to the 
proposition that all men are created equal. 



g. A solid background is usually preferable to a background image. In the case of 
a watermark or faded image, the background may contribute to Web site 
branding (see 5 FAH-8 H-431). 

United 
States 
Department 
of 
State 

Complex image Watermark or Light solid color 

background faded image background 

background 

h. A watermark image can be kept stationary while the page content is scrolled by 
including the background-attachment parameter in the style sheet. 

< STYLE type= "text/ess" > 
BODY { 

background: url("dos_seal.jpg"); 
background-attachment: fixed; 

} 

</STYLE"> 




United 
States 
Department 
of 
State 
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5 FAH-8 H-522.4 Use Familiar Fonts 

5 FAH-8 H-522.4-1 Font vs. Typeface 

(CT: WEBS; 04-1 6-2013) 

a. Fonts are specific variations of a typeface. "Times" is a typeface while "Times 
Roman" and "Times Italic" are fonts. Through common use, the word font has 
come to mean both typeface and font. 

b. Fonts are divided into two general categories: "serif" and "sans-serif". Serif 
fonts have short lines added to the ends of the strokes that make the letters 
while the ends of sans-serif letters are straight and unadorned. 

c. When creating a Web site, you can use any font that is installed on your 
computer and it will display correctly during the design process. When the Web 
page is displayed on another computer that does not have the same set of 
fonts, the computer will substitute a default font for any fonts that are 
unidentifiable. The resulting page will not necessarily look the way you 
expected. 

d. All Department Web sites using English or Romance language (Spanish, French, 
etc.) alphabets must be created using fonts from the following "universal" list: 

(1) Sans-serif family: Arial, Verdana, and Tahoma; and 

(2) Serif family: Times New Roman, Garamond, Century Schoolbook, and 
Courier. 

e. Department Web sites using other than English or Romance languages (Greek, 
Russian, Chinese, etc.) may use the alphabet appropriate to the language. 

5 FAH-8 H-522.4-2 Readability 

(CT:WEB-1; 09-29-2005) 

Font legibility is the speed and ease with which individual letters can be 
recognized. The spacing and density of the letters determines the ease with which 
a passage can be read. 

Example: 12-point type with varied density and spacing. 



Sans -SerifB old Condensed 


Sans-Serif Bold Normal 


Sans-Serif Bold Expanded 


Sans-SerifCcndensed 


Sans-Serif Normal 


Sans-Serif Expanded 


SeufBoMCondensed 


SafBoUNomri 


Serif Bold Expanded 


SenfCcndared 


SenfNcmxi 


Serif Expanded 


Serif Exagger 


ated Spacing 




Serif Exaggera 


ted Spacing 





5 FAH-8 H-520 Page 5 of 9 

UNCLASSIFIED (U) 



UNCLASSIFIED (U) 

U.S. Department of State Foreign Affairs Manual Volume 5 Handbook 8 
Web Development Handbook 

5 FAH-8 H-522.5 Path Indicator 

(CT:WEB-1; 09-29-2005) 

a. To assist users in maintaining their perspective within the Web site, each page 
must contain a path showing where the user is relative to the entry or home 
page. A convenient location for the path indicator is immediately under the top 
of page banner or graphic. 

<p>Home > Org Chart > Office Page > <b>List of References</bx/p> 

is displayed as: 



Home > Org Chart > Office Page > List of References 



b. For more convenient navigation, the elements of the path should be created as 
links. This will allow the user to go directly to a previous page rather than 
clicking the "Back" icon several times. 

<pxa href =". /index. html" >Home</a> 
> <a href="./the_organization.html"> Org Chart</a> 
> <a href="./this_office.html"> Office Page</a> 
> <b>List of References</bx/p> 



Home > Org Chart > Office Page > List of References 



5 FAH-8 H-522.6 Page Layout and Consistency 

(CT:WEB-1; 09-29-2005) 

The purpose of a Web site is to present information with each page of the site 
covering a small part of the overall content, not to present a totally new design for 
each new topic. 

5 FAM-8 H-522.6-1 Align Page Elements 

(CT:WEB-1; 09-29-2005) 

Users are conditioned by experience to expect information in neat rows and 
columns. When creating lists of items, align them vertically. When creating 
tables, use <tr> tag parameter valign = "top" to align text at the top of table rows. 
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5 FAM-8 H-522.6-2 Be Consistent 

(CT: WEBS; 04-1 6-2013) 

a. Put office logos at the same place on each page. 

b. Establish levels of importance for each page; 

(1) Locate the most important information at the top of the page; 

(2) Locate less important information further down the page; 

(3) Locate repeated information (e.g., navigation bars) at the same place on 
each page; and 

(4) Use the same style for identifying titles and headings on each page: The 
same location, text color, background, font, size, and weight. 

5 FAM-8 H-522.6-3 Limit the Amount of White Space on the 
Page 

(CT: WEBS; 04-1 6-2013) 

White space is necessary to separate design elements and give the Web page a 
pleasing look; however, too much unused space requires additional time for the 
user to scan the page. 

5 FAH-8 H-523 OPTIONAL DESIGN 
CONSIDERATIONS 

5 FAH-8 H-523. 1 Page Length 

(CT: WEBS; 04-1 6-2013) 

The length of a Web page should be consistent with the purpose of the page: 

(1) Short pages typically will not require scrolling to view the entire page. 
They are appropriately used for home pages and navigation pages where 
you want the viewer to grasp a concept without interruption or 
interference. Short pages should pique the user's interest to find out more 
on successive pages; and 

(2) Long pages will require the viewer to scroll down/up the page to access all 
the information. Long pages are appropriate when imitating a printed 
document, especially where continuity of subject is required. They are also 
more effective when creating a page that is intended for printing. 



5 FAH-8 H-520 Page 7 of 9 

UNCLASSIFIED (U) 



UNCLASSIFIED (U) 

U.S. Department of State Foreign Affairs Manual Volume 5 Handbook 8 
Web Development Handbook 

5 FAH-8 H-523.2 Standard Link Colors 

(CT:WEB-1; 09-29-2005) 

Through frequent use of default colors for links, users have learned that 
underlined blue links are those that the user has not seen and underlined purple 
links are those that the user has previously visited. This is one of the few 
conventions that are standard among the various Web browsers. 

5 FAH-8 H-523.3 Use of Color 

(CT:WEB-1; 09-29-2005) 

Colors have different meanings in different parts of the world. Bureaus/posts 
should respect cultural differences when choosing colors for their Web pages. 

5 FAH-8 H-523.4 Limit Use of Graphics 

(CT:WEB-1; 09-29-2005) 

a. Graphics should be used to enhance understanding of the Web page topic or 
make the page more readable. Many small image files can be just as 
aggravating to the user as a few large image files by increasing the time 
required to download a Web page. 

b. Avoid using graphics as links. Users may not identify a graphic as a link and 
miss finding desired information. If using a graphic as an image map, include 
text instructions so users understand where the sensitized areas are located. 

5 FAH-8 H-523.5 Use Short Sentence/Paragraph 
Length 

(CT: WEBS; 04-1 6-2013) 

Web pages should be used to present information. To keep text focused on the 
intended topic, sentences should be limited to 20 words and paragraphs should be 
no longer than five sentences. Consider using lists to avoid long sentences. 

5 FAH-8 H-523.6 Set Performance and/or Preference 
Goals 

(CT: WEBS; 04-1 6-2013) 

a. Performance goals include how often users find information and how long it 
takes to accomplish the task. Preference goals are related to how satisfied a 
user is with a Web site. 

b. Performance goals are objective and easier to measure. Examples of 
performance goals include finding information within three mouse clicks, finding 
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information at least 80 percent of the time, and finding information within a 
maximum time. 

c. Preference goals are subjective and measure a user's personal opinion about a 
Web site. When measuring preference goals, offering choices ("Was your 
experience good, bad, or not sure?") or asking for a rating scale (1 = 
exceptional, 10 = needs improvement) can help quantify user reactions. 

5 FAH-8 H-524 THROUGH H-529 UNASSIGNED 
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